<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对话</title>
<style type="text/css">
body {
	background-color: gray;
}

.whole {
	width: 500px;
	height: 400px;
	border-radius: 20px;
	margin: 50px auto;
	background-color: white;
	position: relative;
}

.top {
	width: 500px;
	height: 50px;
	margin: 50px auto;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background-color: yellowgreen;
}

h4 {
	text-align: center;
	line-height: 50px;
}

.bottom {
	height: 20px;
	width: 500px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	position: absolute;
	bottom: 0;
	background-color: yellowgreen;
}

.text {
	width: 500px;
	height: 31px;
	position: absolute;
	bottom: 20px;
	border-top: 1px solid;
}

input {
	width: 440px;
	height: 26px;
}

button {
	width: 44px;
	height: 26px;
}
</style>
<script type="text/javascript">
/* 获取地址 */
var wsurl="ws://localhost:8080/chat/chatwithuser"; 
/* 发起请求,触发open事件 */
var ws=new WebSocket(wsurl);
ws.onopen=function(){
	
}
</script> 
</head>
<body>
	<div class="whole">
		<div class="top">
			<h4>与商家正在沟通</h4>
		</div>

		<!-- 内容填写 -->
		<div class="text">
			<input type="text" placeholder="请输入你的内容">
			<button>发送</button>
		</div>


		<div class="bottom"></div>
	</div>

	<!-- 1.显示昵称
2.实时显示聊天记录 -->


</body>
</html>